<template>
	<view class="vip-select">
		
		<!-- 提示弹窗板块 -->
		<view class="mask-model-box" v-if="showModel">
			<view class="centent-white-box">
				<view class="hint-title-text">
					暂未开通会员
				</view>
				<view class="hint-image">
					<image src="https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/07/27/434db9b1-28c9-4bfb-abae-8f57a69b11a5.png" style="width: 100%; height: 100%;"></image>
				</view>
				<view class="text-info">
					开通会员后，可享受选菜服务
				</view>
				<view class="bottom-go-vip" @click="goOpenVip">
					立即开通
				</view>
				<image mode="aspectFit" src="../../../static/image/close.png" class="icon close-showmodel" @click="showModel = false"></image>
			</view>
		</view>
		
		<!-- 轮播图板块-->
		<view v-if="false" style="margin: 0 24rpx; paddint-top: 24rpx;" >
			<u-swiper class="mid-swiper" border-radius="20" height="280" mode="none" :list="imgList" >
			</u-swiper>
		</view>
		<!-- VIP消息板块-->
		<view class="cart-user-box">
			<!-- 会员信息 -->
			<view class="title-user-info top-select">
				<view class="title-tips" style="font-size: 28rpx;color: #111;">会员信息</view>
				<view class="cart-user-info" v-if="addressList.length > 0" @click="selectAddress">
					<view style="font-size: 28rpx; color: #909399;word-break: break-all;word-wrap: break-word;text-align: right;">
						{{ submitParam.receiverName }}
						{{ submitParam.receiverPhone }}
						{{ submitParam.receiverProvince }} 
						{{ submitParam.receiverCity }}
						{{ submitParam.receiverRegion }}
						{{ submitParam.receiverDetailAddress }}
					</view>
					<image src="../../../static/image/edit-icon.png" style="width: 60rpx; height: 30rpx; margin-top: 5rpx; margin-left: 20rpx;"></image>
				</view>
				<view v-else style="display: flex; justify-content: flex-end;align-items: center;
					font-size: 28rpx; color: #999999;flex: 1;overflow: hidden;" @click="addAddress">
					<view class="">
						请选择地址信息
					</view>
					<view class="">
						<image src="../../../static/image/arrow-black.png" style="width: 24rpx; height: 24rpx;margin-top: 10rpx;margin-left:16rpx;"></image>
					</view>
				</view>						
			</view>
			<!-- 配送时间 -->
			<view class="title-user-info top-select">
				<view class="title-tips" style="font-size: 28rpx;color: #111;">配送时间</view>
				<picker @change="confirm" :value="index" :range="dateList">
					<view class="cart-user-info" @click="showSendDate = true" v-if="submitParam.deliveryDate != null">
						{{submitParam.deliveryDate}}
					</view>
					<view v-else style="display: flex; align-items: center; justify-content: flex-end;
						font-size: 28rpx; color: darkgray;" 
						@click="showSendDate = true" >
						<view class="">
							请选择配送时间
						</view>
						<view class="">
							<image src="../../../static/image/arrow-black.png" style="width: 24rpx; height: 24rpx;margin-top: 10rpx;margin-left:16rpx;"></image>
						</view>
					</view>
				</picker>
			</view>
			<view class="title-user-info">
				<view style="font-size: 28rpx;color: #111;margin-bottom: 40rpx;">
					<!-- 菜品选择（可选{{myVipInfo.greensTypeNum}}） -->
					菜品选择
				</view>
				<view class="product-sex-box">
					<view :class="['product-cell', item.selected ? 'active' : '']" v-for="(item, index) in list" :key="item.id" @click="selectItem(index)">
						<image mode="aspectFill" :src="item.skuDefaultImg" class="thumb"></image>
						<view class="title" style=" text-align: center; font-size: 28rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 10rpx;">{{ item.skuTitle }}</view>
					</view>
					<!-- <view class="select-product-img">
						<view class="goods-item" v-for="(item, ids) in productList" :key="ids" v-if="item ? true:false">
							<image :src="item.skuImg" mode="widthFix" class="sku-img"></image>
							<view class="title">{{ item.skuTitle }}</view>
							<view class="price-box">￥{{ item.skuPrice.toFixed(2) }}</view>
							<view class="close-icon" @click="closeProdect(ids)">
								<u-icon name="close-circle" color="#606266" size="36"></u-icon>
							</view>
						</view>
						<view class="goods-item"  v-else>
							<view class="sku-img" >
								<view class="add-product" >
									<u-icon name="plus" color="#606266" size="50"></u-icon>
								</view>
							</view>
						</view>
					</view> -->
				</view>
				
				<view class="hint-text">
					注意：请点击图片选择配送商品，若点错商品，二次点击此商品即可取消
				</view>
				
				<!-- 推荐商品 -->
				<!-- <view class="guess-like">
					<view style="margin: 0 auto; display: flex;line-height: 32rpx; align-items: center; ">
						<view style="color: darkgray; font-size: 34rpx;margin-left: 10rpx; font-weight: 500; font-family: PingFangSC-Medium, PingFang SC; line-height: 24px;">
							—  选择菜品  —
						</view>
					</view>
				</view> -->
				
				<!-- 选择菜品列表 -->
				<!-- <view class="search-lg-box">
					<view class="search-right-body">
						<view class="commodity-list-box">
							<u-empty v-if="dataNull" text="数据为空" mode="list"></u-empty>
							<view v-for="(item, index) in list" :key="index" class="goods-item" >
								<image :src="item.skuImg" mode="widthFix" class="sku-img"></image>
								<view class="title" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;-webkit-line-clamp: 2;">{{ item.skuTitle }}</view>
								<view style="display: flex;flex-direction: row; padding-left: 20rpx; margin-top: 5rpx;">
									<view style="font-size: 28rpx; color: darkgray;">
										已售{{item.saleCount}}件
									</view>
								</view>
								<view class="icon-image" v-if="item.isSelect">
									已选
								</view>
								<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
									<view class="price-box">￥{{ item.skuPrice.toFixed(2) }}</view>
									<view class="addcart-show" v-if="item.isSelect == false"  @click="selectProductItem(item, index)">
										<image src="../../../static/image/cardAdd.png" style="width: 40rpx; height: 40rpx; margin-top: 12rpx;"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			
			<!-- 点击提交 -->
			<view class="submit-botton-box">
				<button class="submit-commodity" :type="isSubmit ? 'primary':'default'"  @click="okSubmit">提交</button>
			</view>
		</view>
		
		<!-- 收货地址 -->
		<u-popup v-model="addressShow" border-radius="12" mode="bottom" :closeable="true">
			<view class="address-selector">
				<view class="addr-title">请选择收货地址</view>
				<view v-for="address in addressList" :key="address.id" class="as-item" @click="addressChange(address)">
					<u-image height="48rpx" width="48rpx"
						style="background-color: #FFFFFF;line-height: 140rpx;margin: 0 20rpx;"
						src="/static/image/address.png">
					</u-image>
					<view>
						<view style="padding: 10rpx 0;">
							<text>{{ address.name }}</text>
							<text style="margin: 0 15rpx;color: #909399;">{{ address.phoneNumber }}</text>
							<text class="default-tag" v-if="address.defaultStatus == '0'">默认</text>
						</view>
						<view style="padding: 10rpx 0;">
							{{ address.province }} {{ address.city }} {{ address.region }} {{ address.detailAddress }}
						</view>
					</view>
				</view>
				<view class="add-btn" @click="saveAddress('')">
					<image mode="aspectFit" src="../../../static/image/add-btn.png" class="icon"></image>
					<view class="add-tips">添加地址</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 已经选了几个菜
				selectNum: 0,
				// 本周是否已经选过菜了
				isPassed: false,
				// 显示下拉地址
				addressShow: false,
				// 地址列表
				addressList: [],
				// 是否可选菜
				isUserBySelect: false,
				// 提示开通会员
				showModel: false,
				// 配送日期筛选框
				index: 0,
				// 选择时间弹框控制
				showSendDate: false,
				// 配送时间
				dateList: [],
				// 是否可以提交菜品
				isSubmit: false,
				// vip 开通类型
				myVipInfo: {},
				// 数据为空
				dataNull: true,
				// 全部商品
				list: [],
				// 选择的商品列表
				productList: [],
				// 轮播图数据
				imgList: [],
				// 发票类型名称
				billTypeName: '不开发票',
				// 提交上传的数据
				submitParam: {
					totalAmount: null,
					payAmount: null,
					shopId: null,
					receiverName: null,
					receiverPhone: null,
					receiverPostCode: null,
					receiverProvince: null,
					receiverCity: null,
					receiverRegion: null,
					receiverDetailAddress: null,
					note: null,
					deliveryCompany: '普通配送',
					sourceType: 1,
					billType: 0,
					billHeader: null,
					billContent: null,
					billReceiverPhone: null,
					billReceiverEmail: null,
					itemList: [],
				},
			}
		},
		onLoad() {
			// 获取菜品
			this.getSearch()
			// 获取轮播图
			this.getSwiperList()
			// 获取配送时间
			this.getDeliveryDate()
			
		},
		onShow() {
			// 获取用户收货地址
			this.getAddress()
			// 获取会员类型
			this.getVipType()
			// 该用户是否可以选菜
			this.getUserIsSelect()
		},
		methods: {
			// 判断用户本周是否已经选过菜品了
			getIsPassSelect(data){
				this.$api.request.getIsPassSelect({
					memberId: uni.getStorageSync('userInfo').id,
					dateList: data
				}, res => {
					if(res.code == 200){
						this.isPassed = res.data
					}
				})
			},
			// 点击切换地址
			selectAddress(){
				this.addressShow = true
			},
			// 改变收货地址
			addressChange(address) {
				this.addressShow = false;
				this.submitParam.receiverName = address.name;
				this.submitParam.receiverPhone = address.phoneNumber;
				this.submitParam.receiverPostCode = address.postCode;
				this.submitParam.receiverProvince = address.province;
				this.submitParam.receiverCity = address.city;
				this.submitParam.receiverRegion = address.region;
				this.submitParam.receiverDetailAddress = address.detailAddress;
			},
			// 获取用户是否可以选菜
			getUserIsSelect(){
				this.$api.request.getUserIsSelect({
					memberId: uni.getStorageSync('userInfo').id
				}, res => {
					if(res.code == 200){
						this.isUserBySelect = res.data
					}
				})
			},
			// 点击提交菜单
			okSubmit(){
				const that = this
				if(!this.isUserBySelect){
					this.showModel = true
				}else if(this.submitParam.receiverProvince == null){
					uni.showToast({
						title: '请选择收货地址',
						icon: 'error'
					})
				}else if(this.submitParam.deliveryDate == null) {
					uni.showToast({
						title: '请选择配送日期',
						icon: 'error'
					})
				}
				else if(this.isPassed == true){
					uni.showToast({
						title: '您本周已选过菜',
						icon: 'error'
					})
				}else if(!this.isSubmit) {
					uni.showToast({
						title: '请选择菜品',
						icon: 'error'
					})
				}else if(this.selectNum != 6){
					uni.showToast({
						title: '请选择6种菜',
						icon: 'error'
					})
				}
				else {
					uni.showModal({
						title: '温馨提示',
						content: '确定提交菜品',
						success: res => {
							if (res.confirm) {							
								console.log('用户点击确定');
								// 组装数据提交菜品
								let param = Object.assign({}, this.submitParam);
								let totalAmount = 0.00
								this.productList.forEach(sku => {
									totalAmount += sku.price;
								})
								param.totalAmount = totalAmount
								param.payAmount = totalAmount
								param.integration = totalAmount
								param.growth = totalAmount
								param.shopId = this.productList[0].shopId
								param.note = "会员选菜"
								param.sourceType = 1
								param.orderType = "1"
								param.status = 1
								this.productList.forEach(sku => {
									let vals = '';
									if (sku.saleAttrValue != null) {
										vals = JSON.stringify({
											key: sku.saleAttrValue.attrName,
											value: sku.saleAttrValue.attrValue
										})
									}
									param.itemList.push({
										spuId: sku.spuId,
										spuName: sku.skuTitle,
										spuPic: sku.skuDefaultImg,
										// spuBrand: sku.brandName,
										categoryId: sku.catalogId,
										skuId: sku.skuId,
										skuName: sku.skuTitle,
										skuPic: sku.skuDefaultImg,
										skuPrice: sku.price,
										skuQuantity: 1,
										skuAttrsVals: vals,
										shopId: this.productList[0].shopId,
										// actId: sku.spuInfo.actId,
										promotionAmount: sku.price,
										
									})
								})
								
								try {
									this.$api.request.memberSubmitOrder(param, res => {
										if(res.code == 200){
											setTimeout(() => {
												uni.showToast({
													title: '选菜成功',
													icon: 'success'
												})
												setTimeout(() => {
													uni.redirectTo({
														url: "/pagesA/sys/user/order?type=2"
													})
												}, 2000)
											},50)
											
										}
									})
								} catch (e) {
									console.log(e);
								}
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
				
			},
			// 选择配送日期
			confirm(e){
				console.log(e);
				this.index = e.detail.value
				this.submitParam.deliveryDate = this.dateList[e.detail.value]
			},
			// 获取配送日期
			getDeliveryDate(){
				this.$api.request.getDeliveryDate({}, res => {
					this.dateList = res.data
					this.getIsPassSelect(res.data)
				})
			},
			// 去添加地址
			addAddress(){
				uni.navigateTo({
					url: "/pages/sys/shopCart/addressManage?id="
				})
			},
			/** 获取轮播图列表 */
			getSwiperList() {
				try {
					this.$api.request.swiperList(res => this.imgList = res.data);
				} catch (e) {
					console.log(e);
				}
			},
			// 添加地址
			saveAddress(id) {
			  uni.navigateTo({
			  	url:"/pages/sys/shopCart/addressManage?id="+id
			  })
			},
			// 获取用户收货地址
			getAddress(){
				const that = this
				this.$api.request.getMemberReceiveAddrList(res => {
					if(res.code == 200){
						console.log(res);
						if(res.data.length > 0){
							this.addressList = res.data
							this.submitParam.receiverName = res.data[0].name;
							this.submitParam.receiverPhone = res.data[0].phoneNumber;
							this.submitParam.receiverPostCode = res.data[0].postCode;
							this.submitParam.receiverProvince = res.data[0].province;
							this.submitParam.receiverCity = res.data[0].city;
							this.submitParam.receiverRegion = res.data[0].region;
							this.submitParam.receiverDetailAddress = res.data[0].detailAddress;
						}
					}
				})
			},
			// 获取会员类型
			getVipType(){
				const that = this
				this.productList = []
				this.$api.request.getMyVipInfo({
					memberId: uni.getStorageSync('userInfo').id
				}, res => {
					if(res.code == 200){
						this.myVipInfo = res.data || {}
						for (let i = 0; i < 6; i++) {
							this.productList.push(null)
						}
						console.log(that.productList);
					}
				})
			},
			// 获取菜品
			getSearch() {
				this.$api.request.getVipGreens({}, res => {
					console.log("查询数据");
					this.list = res.data
					this.dataNull = res.data.length > 0?false:true
				})
			},
			// 取消选菜
			// closeProdect(index) {
			// 	for(let i = 0; i < this.list.length; i++){
			// 		if(this.list[i].skuId == this.productList[index].skuId){
			// 			this.list[i].isSelect = false
			// 			this.productList.splice(index, 1, null)
			// 			break
			// 		}
			// 	}
			// 	this.isSubmitFun()
			// },
			// 判断是否可以提交
			// isSubmitFun(){
			// 	let status = false
			// 	for(let i = 0; i < this.productList.length; i++) {
			// 		if(this.productList[i] != null){
			// 			status = true
			// 			break
			// 		}else {
			// 			status = false
			// 		}
			// 	}
			// 	this.isSubmit = status
			// },
			// 选择菜品
			// selectProductItem(item, index){
			// 	if(this.isUserBySelect == true){
			// 		let stateLen = false
			// 		if(this.list[index].isSelect == false){
			// 			console.log(index);
			// 			for(let i = 0; i < 8; i++){
			// 				if(this.productList[i] == null){
			// 					this.productList[i] = this.list[index]
			// 					this.isSubmit = true
			// 					this.list[index].isSelect = true
			// 					stateLen = true
			// 					break
			// 				}
			// 			}
			// 			if(stateLen == false){
			// 				uni.showToast({
			// 					title: '已选满菜品',
			// 					icon: 'none'
			// 				})
			// 			}
			// 		}
			// 	}
			// 	else{
			// 		console.log("弹出模态框");
			// 		this.showModel = true
			// 	}
			// },
			// 开通vip
			goOpenVip(){
				this.showModel = false
				uni.navigateTo({
					url: '/pagesB/vip/topUp/index'
				})
			},
			// 获取选择的菜品
			selectItem(index) {
				if(this.list[index].selected == true){
					this.selectNum -= 1
					const list = this.list
					const selected = this.list[index].selected
					this.$set(list[index], 'selected', !selected)
					this.calculateSelected()
				}else{
					if(this.selectNum < 6){
						this.selectNum += 1
						const list = this.list
						const selected = this.list[index].selected
						this.$set(list[index], 'selected', !selected)
						this.calculateSelected()
					}else{
						uni.showToast({
							title: '超出可选菜品数',
							icon:"error"
						})
					}
				}
				
			},
			// 计算选择的菜品
			calculateSelected() {
				const list = this.list
				let arr = []
				list.forEach(e => {
					if(e.selected) {
						arr.push(e)
					}
				})
				if(arr.length > 0){
					this.isSubmit = true
				}else{
					this.isSubmit = false
				}
				this.productList = arr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip-select {
		width: 100vw;
		min-height: calc(100vh - 40rpx - constant(safe-area-inset-bottom));
		min-height: calc(100vh - 40rpx - env(safe-area-inset-bottom));
		background: #F7F8FA;
		padding: 20rpx 0 calc(20rpx + constant(safe-area-inset-bottom));
		padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
	}
	
	.mid-swiper {
		width: 704rpx;
		height: 280rpx;
	}
	
	.cart-user-box{
		width: auto;
		// height: 600rpx;
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		// border: 1rpx solid #f4f4f5;
	}
	.title-user-info{
		padding: 30rpx 24rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.0400);
	}
	.top-select{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		.title-tips{
			margin-right: 20rpx;
		}
	}
	.cart-user-info{
		flex: 1;
		overflow: hidden;
		display: flex;
	}
	
	.product-sex-box{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		// column-count: 4;
		// column-gap: normal;
		.product-cell{
			// break-inside: avoid;
			padding: 10rpx;
			border-radius: 16rpx;
			width: 130rpx;
			height: 190rpx;
			margin-right: 15rpx;
			margin-bottom: 30rpx;
			position: relative;
			.thumb{
				width: 100%;
				height: 70%;
				border-radius: 16rpx;
			}
			&:nth-child(4n+4){
				margin-right: 0;
			}
		}
		.active{
			&::after{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: 4rpx solid #009B65;
				border-radius: 16rpx;
			}
		}
		.select-product-img{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			// column-count: 3;
			// column-gap: normal;
			
			
			.goods-item{
				// break-inside: avoid;
				display: flex;
				border-radius: 20rpx;
				margin-left: 15rpx;
				margin-bottom: 30rpx;
				// padding: 0 10rpx 10rpx;
				flex-direction: column;
				background: #FFFFFF;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
				position: relative;
				
				// &:nth-child(2n+1) {
				// 	margin-right: 2%;
				// }
				
				.sku-img {
					width: 28vw;
					height: 100%;
					min-height: 300rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					
					.add-product{
						width: 120rpx;
						height: 120rpx;
						margin: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1rpx dashed #9B9B9B;
					}
				}
				
				
				.title {
					color: #222222;
					font-weight: bold;
					margin: 0 20rpx;
					font-size: 26rpx;
					line-height: 30rpx;
					margin-top: 16rpx;
				}
				
				.sub-title {
					color: #9B9B9B;
					font-size: 22rpx;
					overflow: hidden;
					margin: 0 20rpx;
					margin-top: 10rpx;
					line-height: 26rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				.price-box {
					color: #E71E22;
					font-size: 28rpx;
					margin: 0 20rpx;
					margin-top: 16rpx;
					line-height: 30rpx;
					font-weight: bold;
				}
				
				.close-icon{
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}
		}
		
	}
	
	
	
	
	.search-lg-box{
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		margin-top: 16rpx;
	}
	
	.search-right-body{
		width: 100%;
	}
	
	.commodity-list-box{
		column-count: 2;
		column-gap: normal;
		padding-top: 15rpx;
		
		.goods-item {
			// width: 49%;
			break-inside: avoid;
			width: 100%;
			height: 100%;
			display: flex;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			// padding: 0 10rpx 10rpx;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
			position: relative;
		
			&:nth-child(2n+1) {
				margin-right: 2%;
			}
		
			.sku-img {
				width: 100%;
				height: 100%;
				min-height: 300rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}
		
			.title {
				color: #222222;
				font-weight: bold;
				margin: 0 20rpx;
				font-size: 26rpx;
				line-height: 30rpx;
				margin-top: 16rpx;
			}
		
			.sub-title {
				color: #9B9B9B;
				font-size: 22rpx;
				overflow: hidden;
				margin: 0 20rpx;
				margin-top: 10rpx;
				line-height: 26rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		
			.price-box {
				color: #E71E22;
				font-size: 28rpx;
				margin: 0 20rpx;
				margin-top: 16rpx;
				line-height: 30rpx;
				font-weight: bold;
			}
		}
		
	}
	
	.icon-image {
		width: 80rpx;
		height: 40rpx;
		background: #4CA775;
		border-radius: 2px;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
	}
	
	.guess-like {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 30rpx 23rpx 0;
		margin-top: 50rpx;
	}
	
	
	
	.addcart-show {
		width: 60rpx;
		height: 60rpx;
		margin-right: 8rpx;
		border: 1rpx solid #fa3534;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-content: center;
	}
	
	
	.submit-botton-box{
		margin: 0rpx auto 0;
		width: 100%;
		.submit-commodity{
			width: 100%;
			display: block;
			height: 80rpx;
			font-size: 32rpx;
			border-radius: 46rpx;
			background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
			color: #fff;
		}
	}
	
	
	.mask-model-box{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.centent-white-box{
		width: 80vw;
		height: 672rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		
		.close-showmodel{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			
		}
		
		.hint-image {
			width: 320rpx;
			height: 200rpx;
			margin-top: 108rpx;
			margin-bottom: 32rpx;
		}
		
		.hint-title-text{
			align-items: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #111111;
			line-height: 44rpx;
			margin-bottom: 16rpx;
		}
		
		.text-info{
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #444444;
			line-height: 40rpx;
			margin-bottom: 46rpx;
		}
		
		.bottom-go-vip{
			width: 80%;
			height: 80rpx;			
			background: linear-gradient(328deg, #03D289 0%, #009B65 100%);
			border-radius: 46px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	}
	
	.address-selector {
		height: 1000rpx;
		padding-top: 30rpx;
		background-color: #E5E5E5;
	
		.addr-title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 5rpx;
			line-height: 40rpx;
		}
	
		.as-item {
			display: flex;
			padding: 10rpx;
			line-height: 38rpx;
			border-radius: 12rpx;
			margin: 10rpx 10rpx 0;
			background-color: #FFFFFF;
	
			.default-tag {
				color: #E71E22;
				padding: 0 10rpx;
				margin-left: 20rpx;
				border: 1px #E71E22 solid;
			}
		}
	}
	
	.add-btn {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-top: 40rpx;
	  .icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
		.add-tips{
			font-size: 32rpx;
			color: #111;
		}
	}
	
	.hint-text{
		margin-top: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: red;
	}
</style>